<template>
  <el-container style="height: 150vh">
    <Menu />
    <el-container>
      <el-header>
        <span class="text1">喜悦辰光酒店</span>
        <div class="digbox">
          <!-- 帮助中心 -->
          <div class="zbox">
            <el-icon style="color: #fff">
              <QuestionFilled />
            </el-icon>
            <p class="sp1">帮助中心</p>
          </div>
          <!--消息中心 -->
          <div class="bbox">
            <el-icon style="color: #fff">
              <QuestionFilled />
            </el-icon>
            <p class="xxzx">消息中心</p>
          </div>
          <!--在线中心  -->
          <div class="zxbox">
            <el-icon style="color: #fff">
              <QuestionFilled />
            </el-icon>
            <p class="zxzx">在线中心</p>
          </div>
          <!-- 头像 -->
          <div class="tx">
            <img src="../../assets/images/icon14.png" alt="" />
            <span><el-icon>
                <ArrowDownBold />
              </el-icon></span>
          </div>
        </div>
      </el-header>
      <el-main>
        <RouterView />
      </el-main>
    </el-container>
  </el-container>
</template>
<script lang="ts" setup>
import Menu from "./component/Menu.vue";
</script>
<style lang="less" scoped>
.el-header {
  background-color: #002855;
  position: relative;

  .text1 {
    width: 135px;
    height: 23px;
    font-size: 22px;
    color: #fff;
    line-height: 23px;
    margin-top: 19px;
    margin-bottom: 22px;
    display: block;
  }

  .zbox {
    position: absolute;
    top: 0px;
    right: 230px;

    .el-icon {
      font-size: 20px;
      margin-top: 9px;
      margin-left: 12px;
    }

    .sp1 {
      color: #fff;
      margin-top: 4px;
    }
  }

  .bbox {
    position: absolute;
    top: 0px;
    right: 160px;

    .el-icon {
      font-size: 20px;
      margin-top: 9px;
      margin-left: 12px;
    }

    .xxzx {
      color: #fff;
      margin-top: 4px;
    }
  }

  .zxbox {
    position: absolute;
    top: 0px;
    right: 100px;

    .el-icon {
      font-size: 20px;
      margin-top: 9px;
      margin-left: 12px;
    }

    .zxzx {
      color: #fff;
      margin-top: 4px;
    }
  }

  .tx {
    position: absolute;
    top: 0px;
    right: 25px;
    margin-top: 4px;
    height: 50px;

    .el-icon {
      font-size: 20px;
      color: #fff;
      position: relative;
      top: -10px;
      left: 10px;
    }
  }
}
</style>
